<template>
  <div class="list">
    <div class="tip">你正在预览{{city}}的天气信息,可以通过右上角的"+"保存起来 <i class="iconfont icon-jiahao" @click="add()" v-if="isVisible"></i></div>
    <div class="weather-info" v-if="cityWeather.length > 0">
      <h1>当日气温是:{{cityWeather[0].dayTemp}}摄氏度</h1>
      <h1>当日天气是: {{cityWeather[0].dayWeather}}</h1>
      <h1>当日风向是: {{cityWeather[0].dayWindDir}}</h1>
      <h1>当日风力是: {{cityWeather[0].dayWindPower}}级</h1>
    </div>
    <hr>
    <div class="weather">
      <div class="weatherInfo">
        <div class="info" v-if="cityWeather.length > 0">
          <span>今天</span>
          <span>{{cityWeather[0].date}}</span>
          <span>{{cityWeather[0].dayWeather}}</span>
          <span>风力{{cityWeather[0].dayWindPower}}</span>
        </div>
        <div class="info" v-if="cityWeather.length > 0">
          <span>明天</span>
          <span>{{cityWeather[1].date}}</span>
          <span>{{cityWeather[1].dayWeather}}</span>
          <span>风力{{cityWeather[1].dayWindPower}}</span>
        </div>
        <div class="info" v-if="cityWeather.length > 0">
          <span>周{{cityWeather[2].week}}</span>
          <span>{{cityWeather[2].date}}</span>
          <span>{{cityWeather[2].dayWeather}}</span>
          <span>风力{{cityWeather[2].dayWindPower}}</span>
        </div>
        <div class="info" v-if="cityWeather.length > 0">
          <span>周{{cityWeather[3].week}}</span>
          <span>{{cityWeather[3].date}}</span>
          <span>{{cityWeather[3].dayWeather}}</span>
          <span>风力{{cityWeather[3].dayWindPower}}</span>
        </div>
      </div>
      <div class="weatherChart">
        <v-echarts :option="option"/>
      </div>
    </div>
  </div>
</template>

<script>
import {useRoute} from 'vue-router'
import {onMounted,ref,watch} from 'vue'
import {getCityWeather,getTimeWeather} from '../../API/index.js'
export default {
setup(props,ctx){

  //请求城市数据
  const city = ref('')
  onMounted(() => {
    city.value = useRoute().query.text
  })

  //请求天气数据
  const cityWeather = ref([])
  const cityTimeWeather = ref([])
  const getCityWeatherData = async () => {
    try {
      cityWeather.value = await getCityWeather(city.value);
    } catch (error) {
      console.log(error);
    }
    try {
      cityTimeWeather.value = await getTimeWeather(city.value);
    } catch (error) {
      console.log(error);
    }
  };

  //点击存储数据
  const isVisible = ref(true);
  const add = () => {
    isVisible.value = false
  const storedWeather = localStorage.getItem('showListWeather');
  let weatherData = [];

  if (storedWeather) {
    weatherData = JSON.parse(storedWeather);
  }
    const updatedWeatherData = weatherData.concat(cityTimeWeather.value);
    const dataStringWeather = JSON.stringify(updatedWeatherData);
    localStorage.setItem('showListWeather', dataStringWeather);
  };

  //天气图表
  const option = ref(null)
  const chart = ref(null)
  const renderCharts = (data1,data2)=>{
    option.value={
       xAxis: {
          type: 'category',
          show: false,
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          show: false,
          min:10,
          max:50,
        },
        grid:{
          top:10,
          left:'12%',
          right:'12%',
        },
        series:[
          {
            name:'series1',
            type:'line',
            data:data1,
            label: {
            show: true,
            formatter: '白:{c}', 
            position: 'top', 
            color:'white',
            }
          },
          {
            name:'series2',
            type:'line',
            data:data2,
            label: {
            show: true,
            formatter: '晚:{c}',
            position: 'bottom',
            color:'white',
            }
          }
        ]
    };
    if (chart.value) {
      chart.value.setOption(option.value);
    }
  }
  watch(cityWeather,(newValue) => {
    renderCharts(newValue.map(item => item.dayTemp),newValue.map(item => item.nightTemp))
  })
   console.log(cityWeather,333);
  watch(city, (newValue) => {
    getCityWeatherData(newValue)
    });
  return{
    city,
    getCityWeatherData,
    cityTimeWeather, 
    cityWeather ,
    renderCharts,
    option,
    add,
    isVisible,
  }
 },
}
</script>

<style scoped>
.iconfont{
  color: white;
  position: relative;
  top: -58px;
  left: 400px;
  font-size: 20px;
}
.iconfont:hover{
  color: grey;
  cursor: pointer;
}
.list{
  width: 100%;
  height: 635px;
  background-color: rgb(0,102,138);
}
.list .tip{
  width: 100%;
  height: 40px;
  padding: 0.5rem;
  box-sizing: border-box;
  background: rgb(0,78,113);
  color: white;
  text-align: center;
}
.list .weather-info{
  display: grid;
  width: 100%;
  height: 144px;
  margin-top: 1.5rem;
  gap: 1rem;
  text-align: center;
  padding-right: 10rem;
  padding-left: 10rem;
  box-sizing: border-box;
}
.list .weather-info h1{
  font-size: inherit;
  font-weight: inherit;
  color: white;
}
hr{
  display: block;
  margin-block-start: 1.5rem;
  height: 0.05px;
  border-color: rgb(180, 173, 173);
}
.weather{
  width: 1200px;
  height: 384px;
  background: rgb(0,78,113);
  margin-right: 10rem;
  margin-left: 10rem;
  margin-top: 0.5rem;
  padding-top: 2.5rem;
  padding-left: 3rem;
  padding-right: 3rem;
  box-sizing: border-box;
}
.weather .weatherInfo{
  width: 1103px;
  height: 144px;
  display: flex;
  gap: 1.5rem;
}
.weather .weatherInfo .info{
  width: 257.8px;
  height: 144px;
  display: grid;
  gap: 1rem;
  text-align: center;
  color: white;
}
.weather .weatherChart{
  width: 1103px;
  height: 160px;
  margin-top: 2.5rem;

}
</style>